<template>
  <div>
    <div style="border: 1px solid #ccc">
      <!-- 将编辑器实例和工具栏绑定 -->
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="html"
        @onCreated="onCreated"
        :default-config="editorConfig"
      />
    </div>
    <button @click="insert">插入预设</button>
    <div>{{ html }}</div>
    <div v-html="html"></div>
  </div>
</template>
<script>
import Btn from "./components/Btn.vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  data() {
    return {
      editor: null,
      html: "",
      editorConfig: {
        MENU_CONF: {
          uploadImage: {
            // 转化为base64的阈值
            // base64LimitSize: 500000 * 1024
            // 上传地址
            server: "http://jx.xuzhixiang.top/upload_file_qn.php",
            fieldName: "file", //上传的文件参数名

            //对应响应结果
            async customInsert(res, insertFn) {
              console.log(res);
              insertFn(res.file_url);
            },
          },
        },
      },
    };
  },
  methods: {
    // 编辑器实例创建完毕
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    insert() {
      this.editor.dangerouslyInsertHtml(`<h1>标题</h1><p>文本 <b>加粗</b></p>`);
    },
  },
  components: {
    Btn,
    Editor,
    Toolbar,
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
